<template>
	<view class="follow">
		
		<view class="myfollow-item" v-if="followMe.length >= 0" v-for="(item,index) in followMe" :key="index" @tap.stop="gouserhp(item.id)">
			<!-- 左侧头像 -->
			<view class="avatar">
				<image :src="item.avatar" mode=""></image>
			</view>
			<!-- 右侧内容 -->
			<view class="right">
				<view class="name">
					{{item.name}}
				</view>
				<view class="detail">
					<view class="gender">
						<image v-if="item.gender==1"  src="../../../static/images/user/male.svg" mode=""></image>
						<image v-if="item.gender==2" src="../../../static/images/user/female.svg" mode=""></image>
						<text class="address" v-if="item.city">{{item.city}}</text>
					</view>
				</view>
			</view>
			
			<!-- 关注按钮 -->
			<view  @tap.stop="toggleFollow(item)" hover-class="none" class="follow-btn"  v-if="item.flag == 0">相互关注</view>
			<view  @tap.stop="toggleFollow(item)" hover-class="none" class="follow-btn"  v-else-if="item.flag  == 1">已关注</view>
			<view  @tap.stop="toggleFollow(item)" hover-class="none" class="follow-btn unfollow" v-else="item.flag  == 2">关注</view>
			<!-- <view type="default" @tap.stop="test">test</view> -->
		</view>
		<!-- 没有关注用户 -->
		<view class="none" v-else>
			您还没有人关注喔~_~
		</view>
		
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		data() {
			return {
				isActive:'',
				followMe:[],
				followstatus:null,
				uid:null,  //被查看用户id
				id:null   //获取当前用户id
			}
			
		},
		methods: {
			async getFollowMe(id){//获取用户粉丝
				this.followMe = await api.GetFollowMe(id)
			},
			async toggleFollow(item) {//切换用户关注状态
				this.isfres = await api.IsFollow(item.id)
				if(this.isfres.err == 1 || this.isfres.err == 0) {
					this.ures = await api.UnFollow(item.id)
					if(this.ures.err == 0) {//取消关注成功
						item.flag = 2
					}
				}else {
					this.fres = await  api.Follow(item.id)
					if(this.fres.err == 0) {//关注成功
						this.secondfres = await api.IsFollow(item.id)
						if(this.secondfres.err == 1 ) {
							item.flag = 1
						}else {
							item.flag = 0
						}
						
					}
				}
			},
			
			gouserhp(uid) {//进入用户homepage
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			}
		},
		onShow() {
		 uni.$on("globleEvent",(rel)=>{
						console.log(rel)
						console.log('====');
				})
				console.log('onshowchufa');
		},
		onLoad(p) {
			this.id = p.uid
			this.getFollowMe(this.id)
		}
	}
</script>

<style lang="scss" scoped>
	.none {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #A7AAB5;
	}
	.follow {
		padding: 0 20rpx;
		.myfollow-item {
			display: flex;
			position: relative;
			align-items: center;
			height: 120rpx;
			border-bottom: 2rpx solid #eee;
			padding: 5rpx 0;
			.avatar {
				width: 100rpx;
				height: 100rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
		
				}
			}
			
			.right {
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 20rpx;
				.name {
					padding: 4rpx 0;
				}
				.detail {
					.gender {
						display: flex;
						align-items: center;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
					.address {
						margin-left: 6rpx;
						font-size: 26rpx;
					}
				}
			}
			
			.follow-btn {
				display: flex;
				position: absolute;
				width: 108rpx;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				right: 30rpx;
				font-size: 26rpx; 
				border-radius: 10rpx;
				border: 2rpx solid #ff557f;
				// background-color: #ff557f;
				color: #ff557f;
			}
			.unfollow {
				background-color: #ff557f;
				color: #fff;
			}
			
		}
	}
	
</style>
